<template>
	<view class="page">
		<u-sticky :customNavHeight="0">
		<u-navbar
			leftIcon=""
			bgColor="#FD6F57"
			:fixed="false"
		>
		<!-- 搜索 -->
		<!-- #ifdef MP-WEIXIN -->
			<view slot="left" style="width: 520rpx;">
				<uni-search-bar placeholder="搜索你感兴趣的好物" :radius="20" :disabled="true" @searchClick="onSearch" />
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view slot="center" class="navbar-box">
			<uni-search-bar placeholder="搜索你感兴趣的好物" :radius="20" :disabled="true" @searchClick="onSearch" />
			</view>
			<!-- #endif -->
		</u-navbar>	
		</u-sticky>
		
		<view class="top-box" v-if="bannerList.length > 0">
			<!-- 轮播 -->
			<swiper 
			class="banner-box"
			:indicator-dots="bannerList.length > 1 ? true : false" 
			:autoplay="true" 
			:interval="3000" 
			:duration="800"
			:circular="true"
			indicator-color="#ffffff"
			indicator-active-color="#E81526">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="banner-item">
						<image class="banner-img" :src="item.ad_code"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="content-box">
			<!-- 通知 -->
			<view class="notice-box l-f" v-if="notice_isShow">
				<view class="left">
					头条
				</view>
				<u-notice-bar
				@click="goArticleDetail"
				:text="noticeArr"
				icon=" "
				color="#666666"
				fontSize="28rpx"
				direction="column"
				bgColor="#ffffff"></u-notice-bar>
				<view class="right l-f l-fy-c" @click="goSeedingDetail">
					<text class="more-text">更多</text>
					<u-icon name="arrow-right" size="36rpx" color="#999999"></u-icon>
				</view>
			</view>
			<!-- 分类 -->
			<view class="category-box" v-if="category_isShow">
				<u-grid
					:border="false"
					@click="categoryClick"
				>
					<u-grid-item
						v-for="(item,index) in categoryList"
						:key="index"
					>
						<u--image :showLoading="true" :src="pathUrl + item.img"
						width="80rpx" 
						height="80rpx"
						shape="circle"
						></u--image>
						<text class="grid-text">{{item.font}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 广告 -->
			<Ads :adObj="ad1Obj" v-if="ad1_isShow"/>
			<!-- 秒杀-倒计时 -->
			<down-time :time="time" v-if="time_isShow" />
			<!-- 秒杀-列表 -->
			<Seckill :list="seckillList" v-if="time_isShow"/>
			<!-- 拼团 -->
			<group-booking :list="groupBooking" v-if="group_isShow" />
			<Ads :adObj="ad2Obj" v-if="ad2_isShow" />
			<!-- 套装 -->
			<SetMeal :list="supergoods" v-if="super_isShow" />
			<List v-if="hotList.length > 0" title="热销" :list="hotList" @detail="goDetail"/>
			<List v-if="newList.length > 0" title="新品" :list="newList" @detail="goDetail"/>
			<Ads :adObj="ad3Obj" :list="supergoods" v-if="ad3_isShow" />
			<Ads :adObj="ad4Obj" :list="supergoods" v-if="ad4_isShow"  />
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		<tab-bar/>
	</view>
</template>

<script>
	import {getIndexApi, getNotice} from '@/api/index.js'
	import Ads from '@/components/ads/ads.vue'
	import DownTime from '@/components/downTime/downTime.vue'
	import Seckill from '@/components/seckill/seckill.vue'
	import GroupBooking from '@/components/groupBooking/gruopBooking.vue'
	import SetMeal from '@/components/setMeal/setMeal.vue'
	import List from '@/components/list/list.vue'
	export default {
		components: {
			Ads,
			DownTime,
			Seckill,
			GroupBooking,
			SetMeal,
			List
		},
		computed: {
			noticeArr: function() {
				let noticeArr = []
				for (let i = 0; i <this.noticeList.length; i++) {
					noticeArr.push(this.noticeList[i].title)
				}
				return noticeArr
			}
		},
		data() {
			return {
				loadStatus: 'loading',
				bannerList: [],
				categoryList: [],
				noticeList: [],
				seckillList: [],
				groupBooking: [],
				supergoods: [],
				hotList: [],
				newList: [],
				ad1Obj: {},
				ad2Obj: {},
				ad3Obj: {},
				ad4Obj: {},
				time: 0,
				pathUrl: this.$pathUrl,
				layoutList: [],
				notice_isShow: false,
				category_isShow: false,
				ad1_isShow: false,
				ad2_isShow: false,
				ad3_isShow: false,
				ad4_isShow: false,
				time_isShow: false,
				group_isShow: false,
				super_isShow: false
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getIndexData()
		},
		onPullDownRefresh() {
			this.getIndexData()
		},
		methods: {
			// 文章列表
			goSeedingDetail() {
				uni.navigateTo({
					url: '/pages/aPackage/seedingList/seedingList'
				})
			},
			goArticleDetail(index) {
				const id = this.noticeList[index].article_id
				uni.navigateTo({
					url: `/pages/aPackage/articleDetail/articleDetail?id=${id}`
				})
			},
			goDetail({goods_id,goods_name}) {
				uni.navigateTo({
					url: `/pages/aPackage/goodsDetail/goodsDetail?goods_id=${goods_id}&goods_name=${goods_name}`
				})
			},
			// 获取首页数据
			async getIndexData() {
				const res = await getIndexApi()
				this.loadStatus = 'no-more'
				uni.stopPullDownRefresh()
				this.layoutList = res.data.layout
				const {banner = [],layout = [],miaosha = [], pingtuan = [], 
				supergoods = [], hotGoods = [], newGoods = []} = res.data
				let navs = JSON.parse(layout[3].nav)
				// 导航
				this.categoryList = navs
				// 轮播
				this.bannerList = banner
				// 获取通知
				const notice = await getNotice({
					page: 1
				})
				this.noticeList = notice.data.data
				// 秒杀
				if(miaosha.length > 0) {
					const current_time = new Date().getTime()
					this.time = parseInt(miaosha[0].end_time)*1000 - current_time
					this.time = this.time
					this.seckillList = miaosha
				}
				// 拼团
				this.groupBooking = pingtuan
				// 套装
				this.supergoods = supergoods
				// 热销
				this.hotList = hotGoods
				// 新品
				this.newList = newGoods
				try{
					this.notice_isShow =  parseInt(layout[2].is_show) === 1 ? true : false
					this.category_isShow = parseInt(layout[3].is_show) === 1 ? true : false
					this.time_isShow = parseInt(layout[5].is_show) === 1 ? true : false
					this.group_isShow = parseInt(layout[6].is_show) === 1 ? true : false
					this.super_isShow = parseInt(layout[8].is_show) === 1 ? true : false
					// 广告
					if(layout[4].is_show == 1) {
						this.ad1_isShow = true
						this.ad1Obj = JSON.parse(layout[4].ad_content)
					}
					if(layout[7].is_show == 1) {
						this.ad2_isShow = true
						this.ad2Obj = JSON.parse(layout[7].ad_content)
					}
					if(layout[11].is_show == 1) {
						this.ad3_isShow = true
						this.ad3Obj = JSON.parse(layout[11].ad_content)
					}
					if(layout[12].is_show == 1) {
						this.ad4_isShow = true
						this.ad4Obj = JSON.parse(layout[12].ad_content)
					}
				}catch(e){
					//TODO handle the exception
					console.log('error')
				}
				
			},
			categoryClick(e) {
				console.log(e)
			},
			onSearch() {
				uni.navigateTo({
					url: '/pages/aPackage/goodsSearch/goodsSearch',
					animationType: 'fade-in'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	.navbar-box {
		width: 710rpx;
	}
	.top-box {
		background: linear-gradient(to bottom, #FD6F57, #FF5077);
		padding-top: 20rpx;
		.banner-box {
			padding: 0 25rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			.banner-item {
				border-radius: 30rpx 30rpx 0 0;
				overflow: hidden;
				.banner-img {
					border-radius: 30rpx 30rpx 0 0;
					width: 100%;
					height: 350rpx;
				}
			}
		}
	}
	.content-box {
		padding-left: 20rpx;
		padding-right: 20rpx;
		.category-box {
			background-color: #ffffff;
			border-radius: 30rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.grid-text {
				font-size: 28rpx;
				color: #333333;
				margin-top: 15rpx;
			}
		}
		.notice-box {
			border-radius: 30rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			.more-text {
				font-size: 28rpx;
				color: #999999;
			}
		}
		
		
	}
</style>